<template>
  <div>
      <h2>我是Home组件</h2>
      <div class="bor-clu">
        <div class="clu-a">
          <!-- <a class="link-a" active-class="active" href="">News</a>
          <a class="link-a" active-class="active" href="">Message</a> -->

          <!-- 二级路由 需要将父路由路径一起写上 -->
          <router-link class="link-a" active-class="active" to="/home/news">News</router-link>
          <router-link class="link-a" active-class="active" to="/home/message">Messages</router-link>
        </div>
        <div class="content">
          <!-- 路由路径在切换的时候组件都会被销毁，如果不想被销毁的组件则写在keep-alive标签里面
               将不想被销毁的组件写在include属性中 如果不写include属性则在这里出现的所有组件都不会被销毁-->
          <keep-alive include="News">
            <router-view></router-view>
          </keep-alive>
          
        </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'Home',
}
</script>

<style scoped>
  .bor-clu{
    display: flex;
    flex-direction: column;
  }
  .clu-a{
    display: flex;
    flex-direction: row
  }
  .link-a{
    display: block;
    width: 100px;
    /* height: 50px; */
    line-height: 40px;
    text-align: center;
    background-color: seashell;
    /* margin-right: 10px; */
    text-decoration: none;
    border: 1px solid rgba(1, 1, 1, 0.5);
    border-radius: 10px;
  }
  .content{
    margin-top: 5px;
    border-top: 1px solid black;
    padding: 10px;
  }
  .active{
    background-color:skyblue ;
    color: white;
  }
</style>